import React, { Component } from 'react'
import { Text, View, Image, TouchableOpacity, StatusBar, Platform } from 'react-native'

import Config from '../../config'
import SizeUtils from '../../common/SizeUtils'
import ResponseConstants from '../../common/ResponseConstants'
import LoadingView from './LoadingView'
import CommonShareView from './CommonShareView'
import ChangePageAction from '../../actions/common/ChangePageAction'
import LoginOutAction from '../../actions/login/LoginOutAction'

export default class BaseComponent extends Component {
  constructor(props) {
    super(props)
    this.state = {
      componenetName: 'BaseComponent',
      authorization: 0
    }

    this.gotoPage = this.gotoPage.bind(this)
    this.goBack = this.goBack.bind(this)
    this.goBackIndex = this.goBackIndex.bind(this)
    this.popRoute = this.popRoute.bind(this)

    this._backgroudColor = this.props.pageData && this.props.pageData.isRed ? '#ee3535' : '#ffffff'
    this._fontColor = this.props.pageData && this.props.pageData.isRed ? '#fff' : '#000000'
    // console.log("create class object ", this);
  }

  componentWillUpdate(nextProps, nextState) {
    this._checkUnAutorization(nextProps, nextState)
    this._dealComponentWillUpdate(nextProps, nextState)
  }

  _dealComponentWillUpdate(nextProps, nextState) {}

  _checkUnAutorization(nextProps, nextState) {
    if (nextState.authorization == -1) {
      nextState.authorization = 0
      new LoginOutAction().call(this, {
        errorDetail: nextState.authorizationErrorDetail
      })
      return false
    }
    return true
  }

  _checkIsAutorizationUpdate(nextProps, nextState) {
    return this.state.authorization != nextState.authorization
  }

  _checkGetAutorizationInShouldUpdate(nextProps, nextState) {
    //拿到authorization，表示登录成功
    if (this.state.authorization != nextState.authorization && nextState.authorization != 0) {
      this.gotoPage(Config.pages.home)
    }
  }

  render() {
    return <Text>{this.state.componenetName}</Text>
  }

  _renderEmptyView() {
    return (
      <View
        style={{
          width: SizeUtils.getWindowSize().width,
          height: SizeUtils.getWindowSize().height,
          backgroundColor: '#ffffff'
        }}
      />
    )
  }

  _renderShareView(top = 0) {
    if (this.state.showShare) {
      return (
        <View
          style={{
            position: 'absolute',
            top: 0,
            width: SizeUtils.getWindowSize().width,
            height: SizeUtils.getWindowSize().height
          }}
        >
          <CommonShareView
            onClose={() => {
              this.setState({ showShare: false })
            }}
            shareData={this._getShareData()}
          />
        </View>
      )
    }
  }

  _getShareData() {
    ToastUtils.show('分享信息未设置')
    return { type: Constants.MODULE_TYPE.WORK_HARD }
    // {type:Constants.MODULE_TYPE.WORK_HARD,board_id:this.state.postData.board_id,
    // post_id:this.state.postData.post_id,title:this.state.postData.title}
  }

  gotoPage(pageData, routeData = {}, notSave = false) {
    pageData.routeData = routeData
    new ChangePageAction().call(this, {
      type: 'goto',
      prePageObj: this,
      nextPageData: pageData,
      notSave: notSave
    })
  }

  goBack() {
    new ChangePageAction().call(this, { type: 'goBack', prePageObj: this })
  }

  goBackIndex(index) {
    new ChangePageAction().call(this, {
      type: 'goBackIndex',
      prePageObj: this,
      index: index
    })
  }

  popRoute(index) {
    new ChangePageAction().call(this, {
      type: 'popRoute',
      prePageObj: this,
      index: index
    })
  }

  _renderStatusBar(barStyle = 'dark-content', backgroundColor) {
    if (!backgroundColor) {
      backgroundColor = 'white'
    }
    return (
      <StatusBar
        // animated={true}
        // hidden={true}
        backgroundColor={backgroundColor}
        translucent={Platform.OS === 'ios'}
        barStyle={barStyle}
        showHideTransition={'fade'}
        // networkActivityIndicatorVisible={true}
      />
    )
  }

  _renderLoadingView() {
    return <LoadingView />
  }

  _renderNavigationBar() {
    if (!this.props.pageData.navigationBarHidden||this.props.pageData.routeData.isPing) {
      return (
        <View
          style={{
            flex: 1,
            flexDirection: 'row',
            height: SizeUtils.translateDesignHeightToCode(Platform.OS === 'ios' ? 130 : 100),
            position: 'absolute',
            width: SizeUtils.getWindowSize().width,
            paddingTop:
              Platform.OS === 'ios' ? Config.tabBarTop : Config.tabBarTop + SizeUtils.translateDesignHeightToCode(20),
            justifyContent: 'space-between',
            borderBottomWidth: this.props.pageData.showBottomBorder ? SizeUtils.translateDesignNumToCode(3) : 0,
            borderBottomColor: '#f2f2f2',
            backgroundColor: this.props.pageData.routeData.isPing?'#ee3535':this._backgroudColor
          }}
        >
          {this._renderNavigationBarLeftButton()}
          {this._renderNavigationBarTitle()}
          {this._renderNavigationBarRightButton()}
        </View>
      )
    }
  }

  _renderNavigationBarLeftButton() {
    return (
      <TouchableOpacity
        onPress={this._onPressNavigationBarLeftBtn.bind(this)}
        disabled={!this.props.pageData.showLeftButton}
        style={{
          width: SizeUtils.translateDesignWidthToCode(200),
          paddingLeft: SizeUtils.translateDesignWidthToCode(40)
        }}
      >
        {this._renderNavigationBarLeftButtonContent()}
      </TouchableOpacity>
    )
  }

  _renderNavigationBarLeftButtonContent() {
    if (this.props.pageData.showLeftButton) {
      var child = null
      if (this.props.pageData.leftButtonTitle) {
        child = (
          <Text
            style={{
              width: SizeUtils.translateDesignWidthToCode(200 - 40),
              textAlign: 'left',
              fontSize: SizeUtils.translateFontSizeToCode(34),
              backgroundColor: '#00000000',
              borderWidth: 0,
              color: this._fontColor,
              fontFamily: 'STHeitiSC-Medium'
            }}
          >
            {' '}
            {this.props.pageData.leftButtonTitle}{' '}
          </Text>
        )
      } else {
        child = (
          <View
            style={{
              flexDirection: 'row',
              height: SizeUtils.translateDesignHeightToCode(51),
              alignItems: 'center'
            }}
          >
            <Image
              source={this._getLeftButtonImage()}
              style={{
                width: SizeUtils.translateDesignWidthToCode(24),
                height: SizeUtils.translateDesignWidthToCode(41)
              }}
            />
            <Text
              style={{
                fontSize: SizeUtils.translateFontSizeToCode(34),
                width: SizeUtils.translateDesignWidthToCode(200 - 40 - 24),
                paddingLeft: SizeUtils.translateDesignWidthToCode(5)
              }}
            >
              {''}
            </Text>
          </View>
        )
      }
    } else {
      child = (
        <Text
          style={{
            width: SizeUtils.translateDesignWidthToCode(200 - 40),
            textAlign: 'left',
            fontSize: SizeUtils.translateFontSizeToCode(34),
            backgroundColor: '#00000000',
            borderWidth: 0,
            color: this._fontColor,
            fontFamily: 'STHeitiSC-Medium'
          }}
        >
          {' '}
          {}{' '}
        </Text>
      )
    }
    return child
  }

  _getLeftButtonImage() {
    if (this.props.pageData.routeData.isPing) {
      return require('../../../resource/images/common/Back-icon2.png')
    }
    if (this.props.pageData.leftButtonType === 2 || this.props.pageData.isRed) {
      return require('../../../resource/images/common/Back-icon2.png')
    } else {
      return require('../../../resource/images/common/Back-icon.png')
    }
  }

  _onPressNavigationBarLeftBtn() {
    this.goBack()
  }

  _renderNavigationBarTitle() {
    if (this.props.pageData.routeData.isPing||this.props.pageData.showTitle) {
      return (
        <View
          style={{
            height: SizeUtils.translateDesignNumToCode(30),
            maxWidth:SizeUtils.getWindowSize().width*0.6,
            marginTop: 0
          }}
        >
          <Text
            numberOfLines={1}
            style={{
              textAlign: 'center',
              fontSize: SizeUtils.translateFontSizeToCode(34),
              color: this.props.pageData.routeData.isPing?'#fff':this._fontColor,
              fontFamily: 'STHeitiSC-Medium'
            }}
          >
            {' '}
            {this._getTitle()}{' '}
          </Text>
        </View>
      )
    }
  }

  _getTitle() {
    var text = ''
    if (this.props.pageData.routeData.isPing) {
      return '专家投票'
    }
    if (this.props.pageData.title) {
      text = this.props.pageData.title
    }
    if (this.props.pageData.routeData && this.props.pageData.routeData.title) {
      text = this.props.pageData.routeData.title
    }
    return text
  }

  _renderNavigationBarRightButton() {
    return (
      <TouchableOpacity
        onPress={this._onPressNavigationBarRightBtn.bind(this)}
        style={{
          width: SizeUtils.translateDesignWidthToCode(200),
          paddingRight: SizeUtils.translateDesignWidthToCode(40),
          // top:Config.tabBarTop - SizeUtils.translateDesignWidthToCode(50),
          alignItems: 'flex-end'
        }}
      >
        {this._renderNavigationBarRightButtonContent()}
      </TouchableOpacity>
    )
  }

  _renderNavigationBarRightButtonContent() {
    var text = ''
    if (this.props.pageData.showRightButton) {
      text = 'Right'
      if (this.props.pageData.rightButtonTitle) {
        text = this.props.pageData.rightButtonTitle
      }
    }
    return (
      <Text
        style={{
          width: SizeUtils.translateDesignWidthToCode(200 - 40),
          textAlign: 'right',
          fontSize: SizeUtils.translateFontSizeToCode(34),
          color: this._fontColor,
          fontFamily: 'STHeitiSC-Medium'
        }}
      >
        {text}
      </Text>
    )
  }

  _onPressNavigationBarRightBtn() {}
}
